<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>在线考试登录</title>

    <!-- jQuery -->
    <script src="/vendors/jquery/dist/jquery.min.js"></script>

    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- layer -->
    <script src="https://cdn.bootcss.com/layer/2.1/layer.js" type="text/javascript"></script>
</head>
<body onload="cshyzm()">
<section class="material-half-bg">
    <div class="cover"></div>
</section>
<section class="login-content">
    <div class="logo">
        <h1>牛牛在线考试</h1>
    </div>
    <div class="login-box" style="height: 580px;width: 400px">

        <form class="login-form">
            <h3 class="login-head"><i class="fa fa-lg fa-fw fa-user"></i>登录</h3>
            <div  class="form-group">
                <label class="control-label">用户名</label>
                <input id="userName" class="form-control" type="text" placeholder="请输入用户名" autofocus>
            </div>
            <div class="form-group">
                <label class="control-label">密码</label>
                <input id="password" class="form-control" type="password" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <input id="yzm" class="form-control" type="text" style="float: left; width: 60%; margin-bottom: 0px" placeholder="请输入右侧的验证码">
                <canvas onclick="changeOne(show_num)" id="canvas" width="100px" height="36"></canvas>
            </div>
            <div class="form-group">
                <div class="utility">
                    <div class="animated-checkbox">
                        <label>
                            <input  id="remeberMe" type="checkbox"><span class="label-text">记住我</span>
                        </label>
                    </div>
                    <p class="semibold-text mb-2"><a href="#" data-toggle="flip">第一次登录？</a></p>
                </div>
            </div>
            <div class="form-group btn-container">
                <button type="button" onclick="login()" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>立即登录</button>
            </div>
        </form>



        <form class="forget-form" >
            <h3 class="login-head"><i class="fa fa-lg fa-fw fa-lock"></i>注册安全账户</h3>
            <div class="form-group">
                <label class="control-label">用户名</label>
                <input id="Rusername" class="form-control" type="text" placeholder="起个名字吧" onchange="isRepeat()">
                <span id="repeat" style="color: red"></span>
            </div>
            <div class="form-group">
                <label class="control-label">密码</label>
                <input id="Rpassword" class="form-control" type="password" placeholder="记住自己的密码哦">
            </div>
            <div class="form-group">
                <label class="control-label">邮箱</label>
                <input id="uEmail" class="form-control" type="email" placeholder="请绑定邮箱">
            </div>
            <div class="form-group btn-container">
                <button type="button" class="btn btn-primary btn-block" style="width: 100px" onclick="sendEmail()"></i>发送验证码</button><span id="ssp" style="color: palevioletred"></span>
            </div>
            <br>
            <div class="form-group">
                <input id="Ryzm" onchange="isemail()" class="form-control" type="text" placeholder="验证码" style="width: 200px;height: 50px">
            </div>
            <div class="form-group btn-container">
                <button id="zc" style="display: none" type="button" onclick="registerOne()" class="btn btn-primary btn-block"><i class="fa fa-unlock fa-lg fa-fw"></i>立即注册</button>
            </div>
            <div class="form-group mt-3">
                <p class="semibold-text mb-0"><a href="#" data-toggle="flip"><i class="fa fa-angle-left fa-fw"></i>返回登录页面</a></p>
            </div>
        </form>

    </div>
</section>
<!-- Essential javascripts for application to work-->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>

<!-- The javascript plugin to display page loading on top-->
<script src="/js/pace.min.js"></script>
<script type="text/javascript">
    // Login Page Flipbox control
    $('.login-content [data-toggle="flip"]').click(function() {
        $('.login-box').toggleClass('flipped');
        return false;
    });

    //登录
    function login() {
        var userName = $("#userName").val();
        var password = $("#password").val();
        var rememberMe = document.getElementById("remeberMe").checked;
        var yzm = $("#yzm").val();
        var serch = {
            "userName":userName,
            "password":password,
            "rememberMe":rememberMe
        };
        if(userName == "" || password == ""){
            layer.msg("请输入用户名和密码！", { icon: 0 });
            return;
        }
        if(yzm.toLowerCase() != show_num.join("")){
            layer.msg("验证码输入错误！", { icon: 0 });
            return;
        }
        $.ajax({
            url: "/api/login",
            type: "post",
            contentType: "application/json",
            data : JSON.stringify(serch),
            success:function (data) {
                if (data.status == 200) {
                    window.location.href = "/front/index-2";
                } else {
                    layer.msg(data.message, { icon: 0 });
                }
            },
            error: function (data) {
                layer.msg(data.responseText, { icon: 0 });
            },
        });

    }

    //输入用户名后检查是否重名
    function isRepeat() {
        var userName = $("#Rusername").val();
        $.ajax({
            url : "/api/user",
            type : "get",
            data : {"userName":userName},
            dataType : "json",
            success : function (data) {
                if(data.id!=null){
                    $("#repeat").text("该用户名已经被注册！");
                }else {
                    $("#repeat").text("");
                }
            }
        })
    }

    //全局变量6位数验证码
    var Num = "";

    //发送验证码
    function sendEmail() {
        //生成6位数的验证码
        for(var i=0;i<6;i++){
            Num+=Math.floor(Math.random()*10);
        }
        console.log(Num);
        var too = [];
        too.push($("#uEmail").val());
        var Remail = {
            "to":too,
            "text":"您的验证码为："+Num,
            "subject":"牛牛在线考试验证"
        }
        if($("#uEmail").val()!=""){
            $.ajax({
                url: "/api/simpleMail",
                type: "post",
                contentType: "application/json",
                data : JSON.stringify(Remail),
                success:function (data) {
                    if (data.status == 200) {
                        layer.msg("发送成功！请输入验证码验证！", { icon: 0 });
                    } else {
                        layer.msg(data.message, { icon: 0 });
                    }
                },
                error: function (data) {
                    layer.msg(data.responseText, { icon: 0 });
                },
            })
        }else {
            layer.msg("请输入邮箱！", { icon: 0 });
        }
    }


    //验证
    function isemail() {
        var code = $("#Ryzm").val();
        if(code==Num){
            document.getElementById("zc").style.display = "block";
        }else {
            layer.msg("验证码不正确！！", { icon: 0 });
        }
    }

    // 注册新用户
    function registerOne() {
        var userName = $("#Rusername").val();
        var password = $("#Rpassword").val();
        var email = $("#uEmail").val();
        var serch = {
            "userName":userName,
            "password":password,
            "email":email
        };
        if(userName == "" || password == ""){
            layer.msg("请输入用户名和密码！", { icon: 0 });
            return;
        }
        $.ajax({
            url: "/api/user",
            type: "post",
            contentType: "application/json",
            data : JSON.stringify(serch),
            success:function (data) {
                if (data.status == 200) {
                    location.href = "/loginn";
                } else {
                    layer.msg(data.message, { icon: 0 });
                }
            },
            error: function (data) {
                layer.msg(data.responseText, { icon: 0 });
            },
        });

    }

    /* 验证码相关 */
    var show_num = [];
    function changeOne(show_num) {
        var canvas_width = $("#canvas").width();
        var canvas_height = $("#canvas").height();
        var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
        var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length; //获取到数组的长度

        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
            var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
            var txt = aCode[j]; //得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20; //文字在canvas上的x坐标
            var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);
            context.rotate(deg);

            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);

            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) {
            //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) {
            //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    //验证码需要用到的方法
    function randomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    //页面加载时就刷新验证码
    function cshyzm() {
        changeOne(show_num);
    }



</script>
</body>
</html>